<template>
  <div ref="Dom" style="width: 1300px; height: 600px"></div>
</template>

<script>
import { getEchartsshuju } from "@/api/echartsbm/echartsbm";
export default {
  data() {
    return {
      major: null,
      bmsum: null,
    };
  },

  mounted() {
    //获取Dom节点
    let chartDom = this.$refs.Dom;
    //初始化echarts实例
    let myChart = this.$echarts.init(chartDom);
    //绘制图标
    let option;
    option = {
        xAxis: {
            data: [],
            type: "category",
            axisTick: {
                alignWithLabel: true,
            },
        },

        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ["line", "bar"]},
                restore: {show: true},
                saveAsImage: {show: true},
                top: 105,
            },
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },

        title: {
            text: "2、报名详细数量信息",
            subtextStyle: {
                left: "center", //主副标题的水平位置
                top: "center", //主副标题的垂直位置
            },
            x: "left",
            top: 1,
            left: 540,
            textStyle: {
                fontSize: 16,
                color: "#0069f9",
            },
        },
        trigger: "axis",
        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                name: "报名数量",
                data: [],
                type: "bar",
                barWidth: "30%",
                barGap: 1, //柱子之间间距
                showBackground: true,
                backgroundStyle: {
                    color: "rgba(220, 220, 220, 0.8)",
                },
                itemStyle: {
                    color: "#8b658b",
                },
            },
      ],
    };

    getEchartsshuju().then((response) => {
      response.data.forEach((item) => {
        option.xAxis.data.push(item.major);
        // option.xAxis.data = item.major;
        // console.log(item.major);
        option.series[0].data.push(item.bmsum);
      });
      option && myChart.setOption(option);
    });
  },
};
</script>

<style>
</style>
